<!--
*** Created by zhumin on 2023/10/23.***
*** Description: "大屏赛程"
-->
<template>
  <div class="screen-schedule">
    <div class="schedule-top">
      <div class="top-left-logo">
        <img src="../../assets/img/screen/screen-left-logo.png" alt="" srcset="" height="100px" />
      </div>
      <div class="top-item">
        <span :class="itemLogo(itemList[scheduleIndex])"></span>
        {{ itemList[scheduleIndex] }} 今日赛程 ({{ currentDay | currentDayFilter }})
      </div>
      <div class="top-right-logo">
        <img src="../../assets/img/screen/right-logo.png" alt="" srcset="" height="100px" />
      </div>
    </div>
    <div class="scroll_table">
      <div style="display: inline-block; width: 100%" v-if="this.tableData.length > 8">
        <el-table
          :data="tableData"
          class="table"
          :row-class-name="tableRowClassName"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          style="width: 100%"
        >
          <el-table-column
            v-for="(child, num) in columns"
            :key="num + 'j'"
            :label="child.label"
            :prop="child.prop"
            :width="child.minWidth"
          />
        </el-table>
        <vue-seamless-scroll
          :data="tableData"
          class="seamless-warp"
          style="width:100%;overflow: auto;"
          :class-option="classOption"
        >
          <el-table
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            :data="tableData"
            class="table_scroll"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              v-for="(child, num) in columns"
              :key="num + 'i'"
              :label="child.label"
              :prop="child.prop"
              :width="child.minWidth"
            />
          </el-table>
        </vue-seamless-scroll>
      </div>
      <div style="display: inline-block; width: 100%" v-else>
        <el-table
          :data="tableData"
          :row-class-name="tableRowClassName"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          style="width: 100%"
        >
          <el-table-column
            v-for="(child, num) in columns"
            :label="child.label"
            :prop="child.prop"
            :width="child.minWidth"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Storage from '@/assets/js/storage'
import moment from 'moment'
export default {
  created() {
    let diff = moment('2023-10-26 00:00:00').diff(moment(), 'seconds')
    this.currentDay = diff > 0 ? '2023-10-26' : moment().format('YYYY-MM-DD')
    this.getScreenSchduleData()
    this.realTimeGetData()
  },
  data() {
    return {
      currentDay: '2023-10-26',
      timer: null,
      scheduleIndex: 0,
      tableData: [],
      // itemList: ['围棋', '象棋', '国际象棋', '桥牌', '五子棋', '国际跳棋', '掼牌（掼蛋）'],
      itemList: ['围棋', '象棋', '国际象棋', '桥牌', '五子棋', '国际跳棋'],

      columns: [
        { prop: 'BeginTime', label: '比赛时间' },
        { prop: 'SportItemName', label: '项目名称' },
        { prop: 'GameName', label: '比赛名称' },
        { prop: 'VenueName', label: '备注' }
      ]
    }
  },
  computed: {
    classOption() {
      return {
        step: this.tableData.length > 8 ? 0.5 : 0, // 数值越大速度滚动越快
        limitMoveNum: this.tableData.length, // 开始无缝滚动的数据量 this.tableList
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        switchOffset: 30,
        autoPlay: true,
        navigation: false,
        switchSingleStep: 134,
        switchDelay: 400,
        switchDisabledClass: 'disabled',
        isSingleRemUnit: false // singleWidth/singleHeight 是否开启rem度量
      }
    },
    ...mapState({
      screenSchduleData: state => state.schedule.screenSchduleData
    })
  },
  filters: {
    currentDayFilter(value) {
      if (value) {
        let res = value.split('-')
        return res[1] + '月' + res[2] + '日'
      }
    }
  },
  methods: {
    itemLogo(itemName) {
      switch (itemName) {
        case '围棋':
          return 'date-sub-GO'
        case '桥牌':
          return 'date-sub-BR'
        case '象棋':
          return 'date-sub-CC'
        case '国际象棋':
          return 'date-sub-CH'
        case '国际跳棋':
          return 'date-sub-DR'
        case '五子棋':
          return 'date-sub-GB'
        case '掼牌（掼蛋）':
          return ''
        default:
          return
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      } else if (rowIndex % 2 === 0) {
        return 'success-row'
      }
      return ''
    },
    getScreenSchduleData() {
      this.scheduleIndex = Storage.get('scheduleIndex') || 0
      this.$store
        .dispatch('getScreenSchduleData', 'ByDate_' + this.currentDay + '/Data.json')
        .then(_ => {
          console.log(this.screenSchduleData)
          if (this.scheduleIndex >= this.itemList.length) {
            this.scheduleIndex = 0
          }
          this.tableData = this.screenSchduleData[this.itemList[this.scheduleIndex]]
          Storage.set('scheduleIndex', this.scheduleIndex + 1)
        })
        .catch(error => {
          console.log(error)
        })
    },
    clearIntervalTime() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    realTimeGetData() {
      this.clearIntervalTime()
      this.timer = setInterval(() => {
        this.getScreenSchduleData()
      }, 1000 * 60 * 3)
    }
  },
  beforeDestroy() {
    this.clearIntervalTime()
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/screen.scss';
</style>

<style lang="scss" scoped>
::v-deep {
  .el-table .warning-row {
    background-image: linear-gradient(-225deg, #16afc6 0%, #1d8fe1 48%, #625eb1 100%);
    color: #fff;
  }

  .el-table .success-row {
    background-image: linear-gradient(to top, #68ccb6 0%, #b4cfed 100%);
    color: #000;
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background: transparent;
  }

  .el-table thead {
    font-size: 18px;
    height: 60px;
    background: #000;
    color: #4adaff;
    font-weight: 500;
  }
  .el-table .el-table__header-wrapper th {
    background: #000;
  }
  .el-table__header-wrapper th {
    font-size: 18px;
    height: 60px;
    background: #000;
    color: #4adaff;
    font-weight: 500;
  }

  .el-table td,
  .el-table th.is-leaf {
    border: none !important;
  }

  .el-table th > .cell {
    border: none;
    line-height: auto;
    height: auto;
  }

  .el-table__body {
    width: 100% !important;
  }
}
.seamless-warp {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}
</style>
